<template>
  <com-page>
    <!-- <u-navbar placeholder leftIcon="" :title="$t('tabbar.mine')" ></u-navbar> -->
    <!-- 已登录状态 -->
    <view v-if="isLoggedIn" class="com-flex com-color-content-bg com-p-md" @click="onUserInfoClick">
      <view class="com-mr-sm">
        <u-avatar :src="userInfo.avatar" size="80" />
      </view>
      <view class="com-flex-1">
        <view class="com-text-xl com-pb-lg">{{ userInfo.nickname || '用户' }}</view>
        <view class="com-text-sm com-color-tips">{{ userInfo.email || userInfo.phone || '' }}</view>
      </view>
      <view class="com-ml-sm com-p-sm com-arrow" />
    </view>
    
    <!-- 未登录状态 -->
    <view v-else class="com-flex com-color-content-bg com-p-md" @click="onLoginClick">
      <view class="com-mr-sm">
        <u-avatar src="/static/images/default-avatar.png" size="80" />
      </view>
      <view class="com-flex-1">
        <view class="com-text-xl com-pb-lg">点击登录</view>
        <view class="com-text-sm com-color-tips">登录后可查看相关信息</view>
      </view>
      <view class="com-ml-sm com-p-sm com-arrow" />
    </view>

    <!-- <view class="com-cell com-mt-md" @click="$utils.router({ url: '/pages/user/order/order' })">
      <view class="com-cell__left-icon">
        <u-icon name="setting" />
      </view>
      <view class="com-cell__bd">订单</view>
      <view class="com-cell__ft com-arrow" />
    </view> -->

    <view class="com-mt-md">
      <!-- <view class="com-cell">
        <view class="com-cell__left-icon">
          <u-icon name="star" />
        </view> 
        <view class="com-cell__bd">我的深马</view>
        <view class="com-cell__ft com-arrow" />
      </view> -->
      <view class="com-cell" @click="onMyRegistrationClick">
        <!-- <view class="com-cell__left-icon">
          <u-icon name="coupon" />
        </view> -->
        <view class="com-cell__bd">我的报名</view>
        <view class="com-cell__ft com-arrow" />
      </view>
      <view class="com-cell">
        <!-- <view class="com-cell__left-icon">
          <u-icon name="heart" />
        </view> -->
        <view class="com-cell__bd">我的成绩</view>
        <view class="com-cell__ft com-arrow" />
      </view>
	  <view class="com-cell">
	    <!-- <view class="com-cell__left-icon">
	      <u-icon name="heart" />
	    </view> -->
	    <view class="com-cell__bd">我的证书</view>
	    <view class="com-cell__ft com-arrow" />
	  </view>
	  <view class="com-cell" @click="$utils.router({ url: '/pages/user/address/address' })">
	    <!-- <view class="com-cell__left-icon">
	      <u-icon name="heart" />
	    </view> -->
	    <view class="com-cell__bd">我的地址</view>
	    <view class="com-cell__ft com-arrow" />
	  </view>
	  <view class="com-cell" @click="$utils.router({ url: '/pages/user/order/order' })">
	    <!-- <view class="com-cell__left-icon">
	      <u-icon name="heart" />
	    </view> -->
	    <view class="com-cell__bd">我的订单</view>
	    <view class="com-cell__ft com-arrow" />
	  </view>
	  <!-- <view class="com-cell" @click="$utils.router({ url: '/pages/product/list/list' })">
	   
	    <view class="com-cell__bd">深马商城</view>
	    <view class="com-cell__ft com-arrow" />
	  </view> -->
    </view>

    <view class="com-mt-md">
      <view class="com-cell" @click="$utils.router('/pages/app/setting/index')">
        <view class="com-cell__left-icon">
          <u-icon name="setting" />
        </view>
        <view class="com-cell__bd">设置</view>
        <view class="com-cell__ft com-arrow" />
      </view>
    </view>
  </com-page>
</template>

<script>
export default {
  name: 'App-User',
  data() {
    return {
      show: true,
    }
  },
  computed: {
    isLoggedIn() {
      return !!this.$store.state.user.token
    },
    userInfo() {
      return this.$store.state.user.userInfo || {}
    }
  },
  onLoad() {
    this.checkLoginStatus()
  },
  onShow() {
    // 页面显示时重新检查登录状态
    this.checkLoginStatus()
  },
  methods: {
    async checkLoginStatus() {
      if (this.isLoggedIn && !this.userInfo.id) {
        // 有token但没有用户信息，重新获取
        try {
          const info = await this.$api.user.getInfo()
          this.$store.dispatch('setUserInfo', info)
        } catch (error) {
          // 如果获取失败，可能token已过期，清除token
          this.$store.dispatch('setToken', '')
          this.$store.dispatch('setUserInfo', {})
        }
      }
    },
    onLoginClick() {
      this.$utils.router({ url: '/pages/account/login/login' })
    },
    onUserInfoClick() {
      if (this.isLoggedIn) {
        this.$utils.router({ url: '/pages/user/info/info' })
      } else {
        this.onLoginClick()
      }
    },
    onMyRegistrationClick() {
      if (this.isLoggedIn) {
        // 已登录，直接跳转到报名记录页面
        this.$utils.router({ url: '/pages/user/event/event' })
      } else {
        // 未登录，提示用户登录
        uni.showModal({
          title: this.$t('pages_category_category_text_02d9819d'),
          content: this.$t('pages_index_index_desc_423f18cd'),
          success: (res) => {
            if (res.confirm) {
              this.onLoginClick()
            }
          }
        })
      }
    }
  },
}
</script>

<style lang="scss"></style>
